<template>
	<view class="content">
		<table>
			<tr>
				<td>
					商品ID
				</td>
				<td>
					商品名
				</td>
				<td>
					商品价格
				</td>
				<td>
					商品重量
				</td>
				<td>
					商品数量
				</td>
				<td>
					创建日期
				</td>
				<td>
					操作
				</td>
			</tr>
			<tr v-for="v in goods">
				<td>{{v.ID}}</td>
				<td>{{v.Name}}</td>
				<td>{{v.Price}}</td>
				<td>{{v.Kilogram}}</td>
				<td>{{v.Stock}}</td>
				<td>{{v.CreatedAt}}</td>
				<td>
					<table>
						<tr>
							<td>
								<button type="default" @click="del(v.ID)">删除</button>
							</td>
							<td>
								<button type="default" @click="update(v.ID)">修改</button>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<table>
			<tr>
				<td>查询商品名：</td>
				<td><input type="text" value="" v-model="name" placeholder="请输入商品名"/></td>
			</tr>
			<tr>
				<td>每页面数：</td>
				<td><input type="text" value="" v-model="limit" placeholder="请输入期望面数"/></td>
			</tr>
		</table>
		<button type="default" @click="list()">查询</button>
		<uni-pagination title="" show-icon="" :total="total" current="" @change="changepage"></uni-pagination>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				limit:"",
				page:"",
				name:"",
				total:"",
				goods:[],
			}
		},
		onLoad() {
			this.list()
		},
		methods: {
			list(){
				uni.request({
				    url: 'http://127.0.0.1:8081/list', //仅为示例，并非真实接口地址。
				    data: {
				        limit:this.limit,
						page:this.page,
						name:this.name,
				    },
				    header: {
				    },
				    success: (res) => {
				        console.log(res.data);
				        // this.text = 'request success';
						this.total=res.data.Data.Total
						this.goods=res.data.Data.Goods
				    }
				});
			},
			del(ID){
				uni.request({
				    url: 'http://127.0.0.1:8081/del', //仅为示例，并非真实接口地址。
					method:"POST",
				    data: {
				        id:ID,
				    },
				    header: {
						"content-type":"application/x-www-form-urlencoded"
				    },
				    success: (res) => {
				        console.log(res.data);
				        // this.text = 'request success';
						this.list()
				    }
				});
			},
			changepage(e){
				console.log(e)
				this.page=e.current
				this.list()
			},
			update(ID){
				uni.redirectTo({
					url: '../update/update?id='+ID
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
